<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"  />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <meta charset="UTF-8">
    <title>狼人杀-上帝</title>
</head>
<body>
<table class="table table-bordered table-striped table-hover">
<tr>
    <td><button class="btn btn-danger btn-lg" onclick="reset()">重置游戏</button></td>
    <td><button class="btn btn-danger btn-lg" onclick="resetturn()">重置回合</button></td>
</tr>
</table>
    <table class="table table-bordered table-striped table-hover">
        <thead></thead>
        <tbody>
            <tr><td>人数</td><td>
                <select id="gamenum" class="form-control" onchange="setNum(this.value)">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option selected="selected">8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                </select>
            </td></tr>

            <tr><td>
                存活
            </td><td>
                <div id="live" class="container"></div>
            </td></tr>
            <tr><td>
                狼王
            </td><td>
                <div id="langwang" class="container"></div>
            </td></tr>
            <tr><td>
                狼人
            </td><td>
                <div id="langren" class="container"></div>
            </td></tr>
            <tr><td>
                守卫
            </td><td>
                <div id="shouwei" class="container"></div>
            </td></tr>
            <tr><td>
                女巫
            </td><td>
                <div id="nvwu" class="container"></div>
            </td></tr>
            <tr><td>
                预言家
            </td><td>
                <div id="yuyanjia" class="container"></div>
            </td></tr>
            <tr><td>
                猎人
            </td><td>
                <div id="lieren" class="container"></div>
            </td></tr>
            <tr><td>
                白痴
            </td><td>
                <div id="baichi" class="container"></div>
            </td></tr>
            <!--
            <tr><td>
                爱神
            </td><td>
                <div id="aishen" class="container"></div>
            </td></tr>
            <tr><td>
                爱神1
            </td><td>
                <div id="aishen1" class="container"></div>
            </td></tr>
            <tr><td>
                爱神2
            </td><td>
                <div id="aishen2" class="container"></div>
            </td></tr>
            -->
            <tr><td>
                村民
            </td><td>
                <div id="cunmin" class="container"></div>
            </td></tr>
            <tr><td>
                警长
            </td><td>
                <div id="jingzhang" class="container"></div>
            </td></tr>
        </tbody>
    </table>
<table class="table table-bordered table-striped table-hover">
    <tr>
        <td><button class="btn btn-danger btn-lg" onclick="reset()">重置游戏</button></td>
        <td><button class="btn btn-danger btn-lg" onclick="resetturn()">重置回合</button></td>
    </tr>
</table>
    <table class="table table-bordered table-striped table-hover">
        <thead></thead>
        <tbody>
            <tr><td>狼人杀</td><td>
                <div id="clangren" class="container"></div>
            </td></tr>
            <tr><td>守卫守</td><td>
                <div id="shouweishou" class="container"></div>
            </td></tr>
            <tr><td>女巫救</td><td>
                <div id="nvwujiu" class="container"></div>
            </td></tr>
            <tr><td>女巫毒</td><td>
                <div id="nvwudu" class="container"></div>
            </td></tr>
            <tr><td>预言家</td><td>
                <div id="yuyanjiak" class="container"></div>
            </td></tr>
        </tbody>
    </table>
    <div style="white-space: pre-wrap;">
        天黑请闭眼，守卫请睁眼，守卫今天晚上你要守谁?守卫请闭眼。
        狼人请睁眼，狼人请杀人，狼人请闭眼。
        女巫请睁眼，昨晚他死了，你有一瓶解药，要救吗？你有一瓶毒药要用吗？毒谁？好的，女巫请闭眼。
        预言家请睁眼预言家请选择一位玩家查验身份，好人是向上，坏人是向下，他的身份是这个，预言家请闭眼。
        猎人请睁眼，确认身份，猎人请闭眼，白痴请睁眼，白痴请闭眼。
        天亮了，竞选警徽的请举手，请发言，没有上警的玩家请投票，好，警长确定。
        昨晚死的是他，请发表遗言。
        请警长选择从死左或死右开始发言。
        <img src="hand.png" />
    </div>

<script type="text/javascript">
    $(document).ready(function() {
        init();


        }
    );
    var num=8;

    function reset(){
        if(confirm("重置游戏？")){
            init();
        }
    }

    function resetturn(){
        if(confirm("重置回合？")){
            turn();
        }
    }

    function setNum(value){
        num=parseInt(value);
        init();
    }
    function init(){
        generate('btn btn-success btn-lg','live','change');
        generate('btn btn-primary btn-lg','cunmin','change1',true);
        generate('btn btn-secondary btn-lg','langwang','change1');
        generate('btn btn-secondary btn-lg','langren','change1');
        generate('btn btn-secondary btn-lg','shouwei','change1');
        generate('btn btn-secondary btn-lg','nvwu','change1');
        generate('btn btn-secondary btn-lg','yuyanjia','change1');
        generate('btn btn-secondary btn-lg','lieren','change1');
        generate('btn btn-secondary btn-lg','baichi','change1');
        generate('btn btn-secondary btn-lg','aishen','change1');
        generate('btn btn-secondary btn-lg','aishen1','change1');
        generate('btn btn-secondary btn-lg','aishen2','change1');
        generate('btn btn-secondary btn-lg','jingzhang','change2');


        turn();




    }

    function turn(){
        generate('btn btn-secondary btn-lg','clangren','change2');
        generate('btn btn-secondary btn-lg','shouweishou','change2');
        generate('btn btn-secondary btn-lg','nvwujiu','change2');
        generate('btn btn-secondary btn-lg','nvwudu','change2');
        generate('btn btn-secondary btn-lg','yuyanjiak','change2');
    }


    function generate(classname,id,func,cunmin){
        var h = ''
        for(var i=1;i<num+1;i++){
            h = h + '<button '+(cunmin?('id="cunmin_'+i+'"'):"")+'type="button" class="'+classname+'" onclick="'+func+'(this,'+(cunmin?"1":"0")+')">'+i+'</button>\n';
        }
        $('#'+id).html(h);
    }

    function change(ele){
        if(ele.className=="btn btn-danger btn-lg"){
            ele.className = "btn btn-success btn-lg"
        }else{
            ele.className = "btn btn-danger btn-lg"
        }
    }

    function change1(ele,cunmin){
        if(ele.className=="btn btn-primary btn-lg"){
            ele.className = "btn btn-secondary btn-lg"
        }else{
            ele.className = "btn btn-primary btn-lg"
        }
        if(!cunmin){
            $('#cunmin_'+ele.innerHTML).click();
        }
    }
    function change2(ele,cunmin){
        if(ele.className=="btn btn-primary btn-lg"){
            ele.className = "btn btn-secondary btn-lg"
        }else{
            ele.className = "btn btn-primary btn-lg"
        }
    }



</script>



</body>
</html>